<template>
  <div>
    <div class="search">
      <el-form :model="queryParams" ref="queryForm" :inline="true" @submit.native.prevent>
        <el-form-item label="添加时间">
          <el-date-picker
            clearable
            type="date"
            placeholder="选择日期"
            v-model="queryParams.time"
            style="width: 240px"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle">
      <!-- 按钮 -->
      <div>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="dialogVisible = true"
        >新增</el-button>
      </div>
      <!-- 表格 -->
      <div class="tab">
        <el-table
          v-loading="loading"
          border
          :data="dataList"
          style="width: 100%;cursor: pointer;"
          size="medium"
          :header-cell-style="{background:'#f8f8f9',color:'#515a6e',fontWeight: 'bold'}"
        >
          <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
          <el-table-column label="图片" align="center" width="150">
            <template slot-scope="{row}">
              <el-image style="width:100%;" :src="row.img_url" :preview-src-list="[row.img_url]"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="img_url" label="图片链接" align="center" show-overflow-tooltip></el-table-column>
          <el-table-column prop="time" label="添加时间" align="center" width="150"></el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="{row}">
              <el-popconfirm title="确定删除吗？" @confirm="onDelete(row)">
                <el-button slot="reference" size="mini" type="text" icon="el-icon-delete">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination
          class="pagination-container"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.current"
          :page-sizes="[4, 6, 8]"
          :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 对话框 -->
    <el-dialog
      title="新增轮播图"
      :visible.sync="dialogVisible"
      width="30%"
      top="5%"
      :before-close="cancel"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="当前时间">
          <el-date-picker
            disabled
            type="date"
            v-model="form.time"
            style="width: 50%;"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="上传图片" class="system">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            v-loading.fullscreen.lock="imgLoading"
          >
            <img v-if="form.img_url" :src="form.img_url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="onAddImg">立即创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCarouselImgList,
  dl_CarouselImg,
  add_CarouselImg
} from "@/api/system/api";
import { getDate } from "@/utils/date";
export default {
  data() {
    return {
      // 上传地址
      action: "",
      loading: false,
      imgLoading: false,
      dialogVisible: false,

      queryParams: {
        size: 6,
        current: 1,
        time: ""
      },
      total: 0,
      dataList: [],
      form: {
        id: "",
        time: getDate(),
        img_url: ""
      }
    };
  },
  created() {
    this.action = process.env.VUE_APP_BASE_API + "admin/setCarouselImg";
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getCarouselImgList(this.queryParams).then(res => {
        let data = res.data;
        this.dataList = data.dataList;
        this.total = data.total;
        this.loading = false;
      });
    },
    // 重置
    onReset() {
      this.queryParams.time = "";
      this.getList();
    },
    // 删除
    onDelete({ id }) {
      let query = {
        id
      };
      dl_CarouselImg(query).then(res => {
        let data = res.data;
        if (data == "ok") {
          this.getList();
          this.$message.success("删除成功！！！");
        }
      });
    },
    // 取消
    cancel() {
      this.dialogVisible = false;
      this.resetForm();
    },
    // 清空表单数据
    resetForm() {
      this.form = {
        id: "",
        time: getDate(),
        img_url: ""
      };
    },
    onAddImg() {
      this.loading = true;
      console.log("this.form.img_url", Boolean(this.form.img_url));

      if (!this.form.img_url) {
        this.$message.info("请上传图片！！！");
        return;
      }
      add_CarouselImg(this.form).then(res => {
        let data = res.data;
        if (data == "ok") {
          this.resetForm();
          this.$message.success("添加成功！！！");
          this.dialogVisible = false;
          this.getList();
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.form.img_url = URL.createObjectURL(file.raw);
      this.imgLoading = false;
    },
    beforeAvatarUpload(file) {
      this.imgLoading = true;

      const isJPG = file.type === "image/jpeg" || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG和png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    }
  }
};
</script>
<style>
.system .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.system .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.system .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 278px;
  height: 150;
  line-height: 150px;
  text-align: center;
}
.system .avatar {
  width: 278px;
  height: 150px;
  display: block;
}
</style>
<style>
.el-table--border .el-table__cell {
  border: none;
}
</style>
<style scoped>
.middle {
  background: #fff;
  margin: 0 15px;
}
.middle > div {
  padding: 20px 20px 10px 20px;
}
.search {
  margin: 10px 15px 0 15px;
}
.paging {
  display: flex;
  justify-content: end;
}
.pagination-container {
  margin-left: auto;
  margin-bottom: 20px;
}
</style>